<template>
  <div class="text-center py-12">
    <div class="text-red-500 mb-4">
      <svg class="w-12 h-12 mx-auto mb-3" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
      </svg>
    </div>
    <h3 class="text-lg font-medium text-gray-900 mb-2">{{ title || '出现错误' }}</h3>
    <p class="text-gray-500 mb-4">{{ message || '请稍后重试' }}</p>
    <div class="flex justify-center space-x-3">
      <Button 
        variant="primary"
        size="md"
        @click="handleRetry"
      >
        重试
      </Button>
      <Button 
        v-if="showRefresh"
        variant="outline"
        size="md"
        @click="handleRefresh"
      >
        刷新页面
      </Button>
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from '@/components/ui/Button.vue'

interface Props {
  title?: string
  message?: string
  showRefresh?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showRefresh: false
})

const emit = defineEmits<{
  retry: []
  refresh: []
}>()

const handleRetry = () => {
  emit('retry')
}

const handleRefresh = () => {
  emit('refresh')
  window.location.reload()
}
</script>
